<template>
  <div>
    <a-form ref="formRef" :model="form" :rules="rules">
      <a-row>
        <a-col :span="6" :offset="1">
          <a-form-item>
            <a-input placeholder="请输入搜索内容"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="4" :offset="1">
          <a-button type="primary" @click="search">搜索</a-button>
        </a-col>
      </a-row>
    </a-form>
    <a-divider></a-divider>

    <!-- 只有超级管理员才可以新增角色的吧，那权限是从本地拿还是从线上拿呢 -->
    <a-button
      type="primary"
      size="medium"
      style="margin-bottom: 20px"
      @click="add"
      v-has="{ a: $route, b: 2 }"
      >新增</a-button
    >

    <a-table
      :columns="columns"
      :data-source="dataSource"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #operation="{ record }">
        <a-button
          type="link"
          @click="edit(record.key)"
          v-has="{ a: $route, b: 2 }"
        >
          编辑</a-button
        >
        <a-button
          type="link"
          danger
          @click="del(record.key)"
          v-has="{ a: $route, b: 2 }"
          >删除</a-button
        >
      </template>
    </a-table>

    <!-- 编辑 -->
    <a-modal
      :destroyOnClose="true"
      v-model:visible="visible"
      :title="title"
      :footer="null"
      @cancle="cancle"
    >
      <a-form
        ref="editRef"
        :model="editForm"
        :rules="rules1"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="管理员账号" name="value">
          <a-input
            placeholder="请输入管理员账号"
            :value="editForm.value"
          ></a-input>
        </a-form-item>

        <a-form-item label="开放权限" name="phone">
          <div style="margin-bottom: 20px">
            <a-checkbox
              v-model:checked="checkAll"
              :indeterminate="indeterminate"
              @change="onCheckAllChange"
            >
              所有权限
            </a-checkbox>
          </div>
          <a-checkbox-group
            v-model:value="checkedList"
            :options="plainOptions"
          />
        </a-form-item>
      </a-form>
      <a-row>
        <a-col :span="4" :offset="8" v-if="title !== '查看管理员'">
          <a-button type="primary" @click="save">保存</a-button>
        </a-col>
        <a-col :span="4" :offset="title == '查看管理员' ? 10 : 2">
          <a-button type="info" @click="cancle">关闭</a-button>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import {
  reactive,
  ref,
  watch,
  computed,
  defineComponent,
  createVNode,
  toRefs,
} from "vue";
import {
  CheckOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import { Modal } from "ant-design-vue";
import { useRoute, useRouter } from "vue-router";
const plainOptions = ["Apple", "Pear", "Orange"];
import {
  validatorPass,
  validtorConfirmPass,
  validatorPhone,
} from "@/assets/js/validate.js";
import { asyncRoutes } from "@/router/index";
import { useModal } from "@/hooks"
export default {
  setup() {
    // 路由这个应该是后端那边固定好的几个。
    console.log(asyncRoutes, "路由列表是");
    const router = useRouter();
    const route = useRoute();
    const formRef = ref("");
    const form = reactive({});
    const loading = ref(false);
    const visible = ref(false);
    const rules = {
      portValue: [
        { required: true, message: "请选择端口!", trigger: "change" },
      ],
    };
    // 表单验证
    const rules1 = {
      phone: [{ validator: validatorPhone, trigger: "blur" }],
      password: [{ validator: validatorPass, trigger: "blur" }],
    };
    const editRef = ref("");
    const editForm = reactive({
      value: "",
    });
    const title = ref("新增角色");
    // 分页器
    const page = reactive({
      current: 1,
      pageSize: 5,
    });

    const columns = [
      {
        title: "角色名称",
        dataIndex: "id",
        className: "table",
        align: "center",
      },

      {
        title: "权限",
        dataIndex: "status",
        className: "table",
        align: "center",
      },
      {
        title: "操作",
        dataIndex: "operation",
        className: "table",
        align: "center",
        fixed: "right",
        slots: {
          customRender: "operation",
        },
      },
    ];
    const dataSource = [];

    for (let i = 0; i < 20; i++) {
      dataSource.push({
        key: i + 2,
        id: "John Brown",
        phone: "18888888888",
        content: "无法提现",
        date: "2021.12.21",
        img: "o",
        status: i,
      });
    }
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: ["Apple", "Orange"], //默认选中的列表是
    });

    const onCheckAllChange = (e) => {
      // console.log(e,'选中事件是');
      Object.assign(state, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
      });
    };

    watch(
      () => state.checkedList,
      (val) => {
        state.indeterminate = !!val.length && val.length < plainOptions.length;
        state.checkAll = val.length === plainOptions.length;

        console.log(state, "选中列表");
      }
    );
    // 分页器
    const pagination = computed(() => ({
      current: page.current,
      pageSize: page.pageSize,
      pageSizeOptions: ["10", "20", "30"],
      showTotal: (total, range) => {
        return "共" + total + "条";
      },
      total: 0,
      showQuickJumper: true,
      showSizeChanger: true,
    }));

    // 分页器改变的时候
    const handleTableChange = (pagination, filters, sorter) => {
      console.log(pagination, "当前分页");
      page.current = pagination.current;
      page.pageSize = pagination.pageSize;

      // 请求列表接口
    };
    // 查询
    const search = () => {
      console.log(form, "表单内容");
      formRef.value
        .validate()
        .then(() => {
          console.log("values", formState, toRaw(formState));
        })
        .catch((error) => {
          console.log("error", error);
        });
    };
    // 停用
    const changeStatus = () => {
      const {closeModal} = useModal.confirm({
        title: "确定停用所选用户吗?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        okType: "danger",
        cancelText: "取消",

      });
    };
    const cancle = () => {
      visible.value = false;
    };
    const add = () => {
      title.value = "新增管理员";
      visible.value = true;
    };
    // 查看
    const look = (key) => {
      title.value = "查看管理员";
      visible.value = true;
    };

    // 编辑
    const edit = (key) => {
      title.value = "编辑角色";
      visible.value = true;
    };
    //  删除
    const del = () => {
      const {closeModal} = useModal.confirm({
        title: "确定删除当前角色吗?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        okType: "danger",
        cancelText: "取消",

      });
    };
    const save = () => {
      console.log(form, "表单内容");
      editRef.value
        .validate()
        .then(() => {
          console.log("values", formState, toRaw(formState));
        })
        .catch((error) => {
          console.log("error", error);
        });
    };

    return {
      formRef,
      form,
      rules,
      dataSource,
      columns,
      loading,
      pagination,
      handleTableChange,
      search,
      edit,
      look,
      del,
      changeStatus,
      editRef,
      editForm,
      save,
      cancle,
      add,
      title,
      visible,
      labelCol: { style: { fontWeight: "bold", width: "100px" } },
      wrapperCol: { offset: 1 },
      rules1,
      ...toRefs(state),
      plainOptions,
      onCheckAllChange,
    };
  },
};
</script>
